<template>
    <div>
        <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>登录信息管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户登陆记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
        <!-- 表格区域 -->
        <el-table stripe border
        ref="multipleTable"
        :data="userloginList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
    <el-table-column prop="accountName" label="账号" width="520" align="center">
    </el-table-column>
    <el-table-column prop="loginTime" label="登入时间" width="520" align="center">
      <template #default="scope">
            {{ formatDate(scope.row.loginTime) }}
          </template>
    </el-table-column>
    <el-table-column prop="loginIP" label="登入IP" width="520" align="center">
    </el-table-column>
  </el-table>
  <!-- 分页区域 -->
   <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNow"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rowCount">
    </el-pagination>
    </el-card>
    </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      userloginList:[],
      pageCount:1,
      pageNow:1,
      pageSize:10,
      rowCount:0,
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList(){
    let fromdata = new FormData();
    fromdata.append("pageSize",this.pageSize)
    fromdata.append("pageNow",this.pageNow)
    axios.post('/IE_MES/userlogin/findByPage.shtml',fromdata).then(
      res => {
        console.log(res.data);
        this.userloginList = res.data.records
        this.pageCount = res.data.pageCount
        this.pageNow = res.data.pageNow
        this.pageSize = res.data.pageSize
        this.rowCount = res.data.rowCount
      }
    )
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.pageNow = newPage
      this.getList()
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  }
}
</script>

<style lang="less" scoped>

</style>
